<template>
  <div>
    <!-- 面包屑 -->
    <div class="home-breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item >知识图库</el-breadcrumb-item>
        <el-breadcrumb-item >药知查询</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="drugquery-content">
      <!-- 输入问题 -->
      <div class="drugquery-content-inputquest">
        <div class="drugquery-content-headtitle">输入问题：</div>
        <div class="drugquery-content-headinput">
          <el-input v-model="questionInput" placeholder="大豆的植物学分类" ></el-input>
          <el-button type="primary" plain :style="{width:200+'px',marginLeft:50+'px'}" @click="queryAnswer">提交</el-button>
        </div>
        <div class="drugquery-content-headhot">
          <ul>
            <li>热门搜索：</li>
            <li v-for="item in this.questionList" @click="clickHotTop(item)"><el-link type="primary" :underline="false">{{item.wquestion}}?</el-link></li>
          </ul>
        </div>
      </div>


      <!-- 答案 和 演示 -->
      <div  class="drugquery-content-bottom">
        <!-- 左边 -->
        <div v-loading="answerLoading">
           <div class="drugquery-content-headtitle">答案：</div>
           <ul>
             <li>答案</li>
             <li v-for="item in this.answerList" :key="item.name">{{item.name}}</li>
           </ul>
        </div>
        <div style="width: 50px;"></div>
        <!-- 右边 -->
        <div>
          <div class="drugquery-content-headtitle">图谱演示：</div>
          <div class="drugquery-content-chart">
            <drugknowledge-querycharts :showData="showData" :relatData="relatData"></drugknowledge-querycharts>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import DrugknowledgeQuerycharts from './echarts/drugKnowledgeQuery'
  import KMaintainApi from '@/api/kMaintainApi'
  import Utils from '@/common/utils/utils'
  export default{
    data(){
      return{
        questionInput:'',
        // 答案list
        answerList:[],
        // 完整的数据
        chartData:{},
        // 答案list加载
        answerLoading:false,

        // 展示数据
        showData:[],
        // 关系数据
        relatData:[],

        // 问题list
        questionList:[]
      }
    },
    components:{
      DrugknowledgeQuerycharts
    },
    created() {
      // 获取热门数据
      KMaintainApi.medAnswerTop('knowledge').then(res => {
        if(res.data.status === "200"){
          this.questionList = res.data.data.records
        }
      })
    },
    methods:{
      // 点击热门
      clickHotTop(item){
        // 输入框内容
        this.questionInput = item.wquestion
        // 请求接口
        KMaintainApi.queryAnswer(this.questionInput).then(res => {
          if(res.data.status === '200' && res.data.data != null){
            this.answerList = []
            this.showData = []
            this.relatData = []
            
            this.chartData = res.data.data
            // 获取答案list
            this.jugeFormOrTo(this.chartData)
            this.answerLoading = false
          }
        })
      },
      // 查询
      queryAnswer(){
        this.answerLoading = true
        this.showData = []
        this.relatData = []
        this.answerList = []
        KMaintainApi.queryAnswer(this.questionInput).then(res => {
          if(res.data.status === '200' && res.data.data != null){
            this.chartData = res.data.data
            // 获取答案list
            this.jugeFormOrTo(this.chartData)
            this.answerLoading = false
          }
        })
      },
      // 判断是form 还是to
      jugeFormOrTo(data){
        var fromForm = data.from
        var toform = data.to
        // console.log(fromForm)
        // console.log(toform)

        // 判断是否有数据
        if(fromForm.length === 0 && toform.length === 0){
          this.showData = []
          this.relatData = []
        }else if(fromForm.length > 0){
          //代表form
          this.recursForm(data)
        }else if(toform.length > 0 ){
          //代表to
          this.recursTo(data)
        }
      },
      // 递归to
      recursTo(data){
        var obj = {
          name: '',
          category: 1,
          draggable: true,
          itemStyle: {
              normal: {
                  color: "#4592FF",
              }
          },
        }
        obj.name = data.entity
        this.showData.push(obj)

        // 便利
        data.to.map(val => {
          var obj1= {
            name: '',
            category: 1,
            draggable: true,
            itemStyle: {
                normal: {
                    color: "#E6A23C",
                }
            },
          }
          obj1.name = val.entity
          this.showData.push(obj1)
          this.answerList.push(obj1)
          var obj2 = {
            source: '',
            target: data.entity,
            value: ''
          }
          obj2.source = val.entity
          obj2.value = val.relation
          this.relatData.push(obj2)
        })
        this.showData = Utils.deteleObject(this.showData)
        // 答案
        this.answerList = Utils.deteleObject(this.answerList)
      },
      // 递归form
      recursForm(data){
        var obj = {
          name: '',
          category: 1,
          draggable: true,
          itemStyle: {
              normal: {
                  color: "#4592FF",
              }
          },
        }
        obj.name = data.entity
        this.showData.push(obj)
        // 便利
        data.from.map(val => {
          var obj1= {
            name: '',
            category: 1,
            draggable: true,
            itemStyle: {
                normal: {
                    color: "#E6A23C",
                }
            },
          }
          obj1.name = val.entity
          this.showData.push(obj1)
          this.answerList.push(obj1)
          var obj2 = {
            source: '',
            target: data.entity,
            value: ''
          }
          obj2.source = val.entity
          obj2.value = val.relation
          this.relatData.push(obj2)
        })
        this.showData = Utils.deteleObject(this.showData)
        // 答案
        this.answerList = Utils.deteleObject(this.answerList)
      }
    }
  }
</script>

<style scoped="scoped">
  .drugquery-content{
    padding: 20px;
    background-color: #FFFFFF;
  }
  .drugquery-content-inputquest{
    display: flex;
    flex-direction: column;
    background-color: rgb(238, 238, 238);
    padding: 10px;
    /* justify-content: space-around; */
  }
  .drugquery-content-headtitle{
    height: 40px;
    line-height: 40px;
    padding-left: 20px;
    background-color: rgb(245, 245, 245);
    box-shadow: 1px 1px 5px #909399;
  }

  .drugquery-content-headinput{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 30px;
    background-color: #FFFFFF;
  }
  .drugquery-content-headhot{
    background-color: #FFFFFF;
  }
  .drugquery-content-headhot ul{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 10px 20px 30px 20px;
  }
  .drugquery-content-headhot ul li{
    margin-left: 10px;
  }
  .drugquery-content-headhot ul li:nth-child(1){
    color: #909399;
  }
  .drugquery-content-bottom{
    display: flex;
    justify-content: space-between;
    background-color: #ededed;
    padding: 10px;
  }
  .drugquery-content-bottom div:nth-child(1){
    flex: 2;
    /* border: 1px solid #E4E7ED ; */
    /* margin-right: 50px; */
  }
  .drugquery-content-bottom div:nth-child(3){
    flex: 5;
    /* margin-left: 50px; */
  }
  .drugquery-content-bottom div ul{
    background-color: #FFFFFF;
    padding: 20px;
  }
  .drugquery-content-bottom div ul li:nth-child(1){
    display: block;
    height: 30px;
    font-size: 15px;
    line-height: 30px;
    color: #77a4b4;
    font-weight: 600;
    border-bottom: 2px solid #E4E7ED;
  }

  .drugquery-content-bottom div ul li{
    display: block;
    height: 50px;
    font-size: 15px;
    line-height: 50px;
    color: #666666;
    border-bottom: 1px solid #E4E7ED;
  }
  .drugquery-content-chart{
    background-color: #FFFFFF;
    height: 50vh;
  }
</style>
